use yew::{function_component, html, Html, Properties};
use yew_hooks::use_local_storage;
use crate::business::component::im_trait::Id;
use crate::business::util::util::get_login_info;
use crate::db::pojo::pojo::{ImMessage, ImMessageActionStatus, ImMessageFileStatus, ImMessageStatus};
use crate::util::time::{format_time3, has_exceeded_time};

#[derive(Properties, PartialEq, Clone)]
pub struct MessageItemProps {
    pub message: ImMessage,
}

#[function_component(MessageItemView)]
pub fn message_item_view(props: &MessageItemProps) -> Html {
    let local_storage = use_local_storage::<String>("_login_".to_string());
    let user_id = match get_login_info(local_storage) {
        None => {None}
        Some(token) => {
            Some(token.use_id)
        }
    };

    if user_id.is_none() {
        return html! {"user id is none"}
    }

    let user_id = user_id.unwrap();
    let is_sender = props.message.is_sender(&user_id);

    let html = if is_sender {
        render_right(props.message.clone())
    } else {
        render_left(props.message.clone())
    };

    html! {
        { html }
    }
}

impl Id for ImMessage {
    type Value = u64;

    fn id(&self) -> Self::Value {
        self.id.unwrap_or_else(|| 0)
    }
}

fn render_left(message: ImMessage) -> Html {
    html!{
        <section>
            <div class="message-item-left" id={ format!("item_{}", message.id()) }>
              <micon><img src="/imgs/head.jpg" class="nav-user-icon"/></micon>
              <mname><span>{message.from_user_id.clone()}</span></mname>
              <mcontent><span>{message.content.clone()}</span></mcontent>
              <mtime><span>{format_time3(&message.server_receive_time)} </span></mtime>
              <mstatus><MessageStatusView message={message.clone()}/></mstatus>
              <mblank><div>  </div></mblank>
            </div>
        </section>
    }
}

fn render_right(message: ImMessage) -> Html {
    html!{
        <section>
            <div class="message-item-right" id={ format!("item_{}", message.id()) }>
              <rtime><span> {format_time3(&message.server_receive_time)} </span></rtime>
              <rname><span>{message.from_user_id.clone()}</span></rname>
              <rcontent><span>{message.content.clone()}</span></rcontent>
              <ricon><img src="/imgs/head.jpg" class="nav-user-icon"/></ricon>
              <rstatus><MessageStatusView message={message.clone()}/></rstatus>
              <rblank><div> </div></rblank>
            </div>
        </section>
    }
}

#[derive(Properties, PartialEq, Clone)]
struct MessageStatusProps {
    message: ImMessage,
}

#[function_component(MessageStatusView)]
fn message_status(props: &MessageStatusProps) -> Html {
    let message = props.message.clone();
    let create_time = message.create_date_time.clone();
    let send_time = 1;
    let status = message.status.clone();
    let action_status = message.action_status.clone();

    if ImMessageActionStatus::is_withdraw(&action_status) || ImMessageStatus::is_withdraw(&status) {
        return html! {};
    }

    if status == ImMessageStatus::Failure {
        return build_message_status_img("/imgs/no_send.png");
    }
    if status == ImMessageStatus::Sending {
        return build_message_status_img("/imgs/sending.jpg");
    }
    if status == ImMessageStatus::Readed {
        return html! {};
    }

    if status == ImMessageStatus::Created && !has_exceeded_time(&create_time, send_time) {
        return build_message_status_img("/imgs/no_send.png");
    } else if status == ImMessageStatus::Created && has_exceeded_time(&create_time, send_time) {
        return html! {};
    } else if status == ImMessageStatus::Sended {
        if message.is_attach_file() {
            return message_file_status(&message);
        }
    } else if status == ImMessageStatus::Ref {
        return build_message_status_img("/imgs/no_read.png");
    }

    html! {}

}

fn message_file_status(message: &ImMessage) -> Html {
    let user_id = message.current_user_id.clone();
    let send_time = 5;

    let file_status = message.file_status.clone();
    let create_time = message.create_date_time.clone();

    if file_status == ImMessageFileStatus::Created && !has_exceeded_time(&create_time, send_time) {
        return build_message_status_img("/imgs/uploading.png");
    } else if file_status == ImMessageFileStatus::Uploaded {
        return html! {};
    } else if file_status == ImMessageFileStatus::Uploading {
        return build_message_status_img("/imgs/uploading.png");
    } else if file_status == ImMessageFileStatus::Downloaded {
        return html! {};
    } else if file_status == ImMessageFileStatus::None && !message.is_sender(&user_id) {
        return build_message_status_img("/imgs/no_download.png");
    } else if file_status == ImMessageFileStatus::Downloaded {
        return html! {};
    } else if file_status == ImMessageFileStatus::Downloading {
        return build_message_status_img("/imgs/downloading.png");
    } else if file_status == ImMessageFileStatus::Created {
        return build_message_status_img("/imgs/no_upload.png");
    } else if file_status == ImMessageFileStatus::None {
        return html! {};
    } else {
        return html! {};
    }
}

fn build_message_status_img(img: &str) -> Html {
    html! {
        <img src={img.to_string()} width="20px" height="20px"/>
    }
}